<template>
  <div class='category-container'>
    <div class='category-header'>
      <span class='category-header-text'>模板概览</span>
      <el-input
        v-model="queryParams.projectName"
        style="width: 30%; margin: 0 20px;" type="text" placeholder="请输入关键字检索模板">
        <el-button slot="append" icon="el-icon-search" ></el-button>
      </el-input>
    </div>
    <div class='category-main'>
      <div class='category-text'>模板专题</div>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="category in categoryType" :key="category.id" >
          <div style='width:100%;height: 100%; position: relative'>
            <div style='position: absolute;width: 100%; color: #ffffff; z-index: 100; text-align:center; bottom:10px '>
              <span>{{ category.categoryName }}</span>
            </div>
            <el-image
              style='position: absolute; top: 0; left: 0; width: 100%; height: 100%;'
              :src="imageSrc"
              fit='cover'
              @click="toCategoryTypeHandle(category.id)">
            </el-image>
          </div>
        </el-carousel-item>
      </el-carousel>

      <div class='category-text'>推荐模板</div>
      <div v-if="dataShowType=='grid'"  class="project-grid-container">
        <div v-if="categoryList.length"
             v-loading="categoryListLoading"
             class="project-grid-view">
          <div v-for="category in categoryList" :key="category.id" class="project-grid-item-view pointer">
            <el-row type="flex" align="middle" justify="center">
              <el-col :span="5">
              <span
                class="project-grid-view-status"
              />
              </el-col>
              <el-col :span="19">
                <el-tooltip :content="category.projectName" placement="top">
                  <p class="project-title">
                    {{ category.projectName}}
                  </p>

                </el-tooltip>
              </el-col>
            </el-row>
            <img class="project-grid-view-preimg"
                 src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/pic%20(1).png">
            <div class='category-btns'>
              <el-button size='mini' @click='previewHandle(category.projectKey)' >预览</el-button>
              <el-button size='mini' @click='catalogueHandle(category.projectKey, category.id)'>使用</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <preview-dialog :key='projectKey' :preview-visible.sync='previewVisible' :projectKey = 'projectKey'></preview-dialog>
    <catalogue-dialog :catalogue-visible.sync='catalogueVisible' :project-key= 'projectKey'></catalogue-dialog>
  </div>
</template>

<script>
import { listCategory, getCategoryList } from "@/api/evaluation/category";
import previewDialog from  "./categoryDialog/PreviewDialog"
import CatalogueDialog from './categoryDialog/CatalogueDialog'
export default {
  name: "category.vue",
  data() {
    return {
      dataShowType: 'grid',
      categoryList: [],
      total: 0,
      categoryListLoading: true,
      categoryTypeLoading: true,
      queryParams: {
        pageNum: 1,
        size: 10,
        projectName: '',
        beginDateTime: null,
        endDateTime: null,
        status: null
      },
      previewVisible: false,
      catalogueVisible: false,
      projectKey: '',
      // 模板分类的id
      categoryId: 0,
      categoryType: [],
      imageSrc: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
    }
  },
  components: {
    previewDialog,
    CatalogueDialog
  },
  created() {
    this.getCategoryType()
    this.getCategoryList()
  },
  methods: {
    // 获取模板列表
    getCategoryList () {
      getCategoryList().then(res => {
        console.log(res)
        this.categoryList = res.rows
        this.total = res.rows.length;
        this.categoryListLoading = false
        console.log(res)
      })
    },
    // 获取模板类型
    getCategoryType () {
      listCategory().then(response => {
        this.categoryType = response.rows;
        this.total = response.rows.length;
        this.categoryTypeLoading = false
      })
    },
    toCategoryTypeHandle (typeId) {
      this.$router.push({ path: '/index/courseProject/', query: { categoryId: typeId } })
    },
    previewHandle (projectKey) {
      this.previewVisible = true
      this.projectKey = projectKey
    },
    catalogueHandle (projectKey, id) {
      this.catalogueVisible = true
      this.projectKey = projectKey
      this.categoryId = id
      console.log('id', id)
    },
    toCategoryHandle (projectKey, type) {
      this.$router.push({ path: '/edit', query: { projectKey: projectKey, active: type } })
      console.log(key)
    },
  }
}


</script>

<style scoped>
.category-container {
  display: flex;
  width: 100%;
  /*height: 100%;*/
  flex-direction: column;
  /*align-items: center;*/
  /*align-content: center;*/
}
.category-main {
  overflow-y: auto;
  margin: 10px;
}
.category-header {
  width: 100%;
  display: flex;
  backdrop-filter: blur(10px);
  justify-content: space-between;
  margin: 10px 0;
}
.category-header-text {
  font-size: 16px;
}
.category-text {
  font-size: 14px;
  line-height: 28px;
  color: #333;
  font-weight: 500;
  margin-bottom: 5px;
}

.category-type {
  display: flex;
  justify-content: space-around;
}
.project-grid-container {
  margin-top: 20px;
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.category-item {
  display: flex;
  width: 200px;
  height: 120px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  box-shadow: 0 3px 6px 3px rgba(0, 0, 0, 0.12);
  margin: 10px;
  position: relative;
}

.project-grid-view {
  display: flex;
  width: 950px;
  flex-direction: row;
  flex-wrap: wrap;
}
.project-grid-item-view {
  width: 169px;
  height: 199px;
  line-height: 20px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  box-shadow: 0 3px 6px 3px rgba(0, 0, 0, 0.12);
  margin: 10px;
  position: relative;
}

.category-btns {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  bottom: 0;
  display: block;
}
.project-grid-view-preimg {
  width: 143px;
  height: 121px;
}
.project-title {
  margin: 14px 0px;
  color: rgba(16, 16, 16, 100);
  font-size: 13px;
  text-align: left;
  line-height: 20px;
  max-height: 20px;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-grid-item-view {
  width: 169px;
  height: 199px;
  line-height: 20px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  box-shadow: 0 3px 6px 3px rgba(0, 0, 0, 0.12);
  margin: 10px;
  position: relative;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
</style>
